<template>
  <div class="osd-config">
    <a-form :model="formState" layout="vertical">
      <a-card title="时间水印" :bordered="false">
        <a-form-item name="timeStampEnabled">
          <a-switch v-model:checked="formState.timeStampEnabled" checked-children="开启" un-checked-children="关闭" disabled />
        </a-form-item>

        <template v-if="formState.timeStampEnabled">
          <a-form-item label="时间格式" name="timeFormat">
            <a-radio-group v-model:value="formState.timeFormat" disabled>
              <a-radio value="24">24小时制</a-radio>
              <a-radio value="12">12小时制</a-radio>
            </a-radio-group>
          </a-form-item>

          <a-form-item label="显示位置" name="timePosition">
            <a-select v-model:value="formState.timePosition" disabled>
              <a-select-option value="topLeft">左上角</a-select-option>
              <a-select-option value="topRight">右上角</a-select-option>
              <a-select-option value="bottomLeft">左下角</a-select-option>
              <a-select-option value="bottomRight">右下角</a-select-option>
            </a-select>
          </a-form-item>
        </template>
      </a-card>

      <div style="margin-top: 16px">
        <a-space>
          <a-button type="primary" @click="handleSubmit" disabled>保存设置</a-button>
          <a-button @click="handleReset" disabled>重置</a-button>
        </a-space>
      </div>
    </a-form>
  </div>
</template>

<script>
import { defineComponent, reactive } from 'vue';
import { message } from 'ant-design-vue';

export default defineComponent({
  name: 'OSDConfig',
  setup() {
    const defaultSettings = {
      timeStampEnabled: true,
      timeFormat: '24',
      timePosition: 'topLeft'
    };

    const formState = reactive({ ...defaultSettings });

    const handleSubmit = async () => {
      try {
        // 这里添加实际的API调用
        message.success('OSD设置已保存');
      } catch (error) {
        message.error('保存失败，请重试');
      }
    };

    const handleReset = () => {
      Object.assign(formState, defaultSettings);
      message.info('已重置为默认设置');
    };

    return {
      formState,
      handleSubmit,
      handleReset
    };
  }
});
</script>

<style scoped>
.osd-config {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
</style>
